<template>
    <div id="app">
      <el-form :inline="true" :model="mobileSearchFrom" class="demo-form-inline">
          <el-form-item label="移动编号">
              <el-input v-model="mobileSearchFrom.mobileId" placeholder="移动编号"></el-input>
          </el-form-item>
          <el-form-item label="移动电话">
              <el-input v-model="mobileSearchFrom.mobileNumber" placeholder="移动电话"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
              <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>
      </el-form>
      <!--基础表格-->
      <el-table
              :data="mobileAry"
              style="width: 100%">
          <el-table-column
                  prop="mobileId"
                  label="编号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="mobileNumber"
                  label="移动电话"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="mobileType"
                  label="移动类型"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="cardNumber"
                  label="卡号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="isAvailable"
                  label="状态"
                  width="180">
          </el-table-column>
          <el-table-column
                  label="操作"
          >
              <template slot-scope="scope">
                  <el-button type="text" size="small" @click="bianji(scope.$index,scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="shanchu(scope.$index,scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="pageList"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

      <!--添加对话框-->
      <el-dialog
              title="添加信息"
              :visible.sync="addDialogVisible"
              width="30%"
      >
          <el-form :model="addForm" label-width="100px">
              <el-form-item label="移动电话">
                  <el-input v-model="addForm.mobileNumber"></el-input>
              </el-form-item>
              <el-form-item label="电话类型">
                  <el-input v-model="addForm.mobileType"></el-input>
              </el-form-item>
              <el-form-item label="卡号">
                  <el-input v-model="addForm.cardNumber"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                  <el-input v-model="addForm.isAvailable"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addSave">添加</el-button>
                  <el-button @click="addDialogVisible=false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>

      <!--编辑对话框-->
      <el-dialog
              title="修改信息"
              :visible.sync="editDialogVisible"
              width="30%"
      >
          <el-form :model="editForm" label-width="100px">
              <el-form-item label="移动电话">
                  <el-input v-model="editForm.mobileNumber"></el-input>
              </el-form-item>
              <el-form-item label="电话类型">
                  <el-input v-model="editForm.mobileType"></el-input>
              </el-form-item>
              <el-form-item label="卡号">
                  <el-input v-model="editForm.cardNumber"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                  <el-input v-model="editForm.isAvailable"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="editSave">保存</el-button>
                  <el-button @click="editDialogVisible=false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
  </div>
</template>

<script>
  import Vue from "vue";

  export default ({
      name:'app',
      data() {
          return {
              mobileAry: [],
              current: 1,
              size: 5,
              total: 0,
              mobileSearchFrom: {},
              pageList: [2, 5, 10, 15],
              addDialogVisible: false,
              addForm: {},
              editDialogVisible: false,
              editForm: {}
          }
      },
      methods:{
          page(){
              this.$axios.post(`/mobile/page?pageNo=${this.current}&pageSize=${this.size}`,this.mobileSearchFrom).then(r=>{
                  this.mobileAry = r.data.list
                  this.total = r.data.total
              })
          },
          handleSizeChange(val){
              this.size = val
              this.page()
          },
          handleCurrentChange(val){
              this.current = val
              this.page()
          },
          add(){
              this.addForm = {}
              this.addDialogVisible = true
          },
          addSave(){
              this.$axios.post(`/mobile/add`,this.addForm).then(r=>{
                  this.addDialogVisible = false
                  alert("添加成功")
                  this.page()
              })
          },
          bianji(index,row){
              this.editDialogVisible = true
              this.$axios.get(`/mobile/getId?id=${row.mobileId}`).then(r=>{
                  this.editForm = r.data
              })
          },
          editSave(){
              this.$axios.post(`/mobile/upd`,this.editForm).then(r=>{
                  this.editDialogVisible = false
                  alert("修改成功")
                  this.page()
              })
          },
          shanchu(index,row){
              if (confirm("您确定要删除吗？")){
                  this.$axios.get(`/mobile/remove?id=${row.mobileId}`).then(r=>{
                      alert("删除成功")
                      this.page()
                  })
              }
          }
      },
      created(){
          this.page()
      }
  })
</script>